<template>
  <div class="zi-ding-yi">
    自定义组件测试
    <zidingyizujian
      v-comModel="pageValue"
      ref="myshit"
      @mylord="getShit"
    ></zidingyizujian>
    <input type="text" v-model="pageValue" />
  </div>
</template>

<script>
import zidingyizujian from './zidingyizujian.vue';
export default {
  name: 'zidingyi',
  components: {
    zidingyizujian,
  },
  data() {
    return {
      pageValue: '这是页面的v-model',
    };
  },
  created () {
 // 绑定全局事件总线
    this.$bus.$on('transferData', this.receiveData);
  },
  provide() {
    console.log('provide执行');

    return {
      'pageVal': this.pageValue
    }
  },
  mounted() {
    console.log('父组件mounted执行');

  },
  beforeDestroy() {
    this.$bus.$off('transferData');
  },

  methods: {
    // 测试全局总线数据接收
    receiveData(...params) {
      console.log('transferData事件传过来的数据', ...params);
    },
    getShit() {
      console.log('name拿到啦 哈哈');
    },
    beforeDestroy() {
      this.$bus.$off('transferData');
    },
  },
  // mounted() {
  //   // this.$refs.myshit.$on('mylord', this.getShit);
  // },
  directives: {
    comModel: {
      // 只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
      bind: function (el, binding, vnode, oldVnode) {},
      //被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
      inserted: function (el, binding, vnode, oldVnode) {
        // console.log(el, 'el');
        // console.log(binding, 'binding');
        // console.log(vnode, 'vnode');
        // console.log(oldVnode, 'oldVnode');
        let input = el.getElementsByTagName('input')[0];
        input.oninput = (e) => {
          let value = e.target.value;
          // vnode.context[binding.expression] = value;
          vnode.context[binding.expression] = value;
          console.log('gan');
          console.log('insert中的binding:', binding.value);
          console.log('binding-value: ', binding.value);
        };
      },
      //所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。
      //但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。
      update: function (el, binding, vnode, oldVnode) {
        let input = el.getElementsByTagName('input')[0];
        console.log(binding.value, input.value);

        input.value = binding.value;
      },
      //指令所在组件的 VNode 及其子 VNode 全部更新后调用。
      componentUpdated: function () {},
      //只调用一次，指令与元素解绑时调用。
      unbind: function () {},
    },
  },
};
</script>

<style>
</style>
